<template>
    <div class="content">
        <img src="../../public/yiback.png" alt="">

        <div class="view">
            <div class="view-a">欢迎使用</div>
            <div class="logo"> 
                <img src="../../public/yilogo.png" alt="">
                集美商品管理终端
            </div>
            <div class="view-b">
                
                <div class="view-b-a">
                    <img src="../../public/user.png" alt="">
                </div>
                <input type="text" placeholder="请输入账号" v-model="value1"> 
            </div>
            <div class="view-b">
                <div class="view-b-a">
                    <img src="../../public/mima.png" alt="">
                </div>
                <input type="password" placeholder="请输入密码" v-model="value2">
            </div>
            <button @click="deng">登录</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import loginService from "@/service/loginService";
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const value1=ref()
const value2=ref()
const router = useRouter()

const deng=(()=>{
    console.log(value1.value+value2.value);
    
    loginService.login(value1.value, value2.value)
        .then((res: any) => {
            //存入分组数据
            console.log(res);
            if(res.data.msg=="用户名或密码错误"){
                alert('用户名或密码错误')
            }
            if(res.data.data!=null){
                sessionStorage.setItem("token", res.data.data)
                ElMessage({
                message: '登录成功',
                type: 'success',
                })
                value1.value=null
                value2.value=null
                router.push("/list")
            }
            

        })
})
</script>

<style scoped lang="less">
.content{
    width: 100%;
    height:100%;
    background-color: rgb(123, 175, 234);
    // overflow: hidden;
    position: relative;
}
img{
    height: 99%;
}
.view{
    width: 450px;
    height: 400px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #7bafea;
    position:relative;
    bottom: 80%;
    left:60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 30px 50px 0 50px;
    >div{
        width: 100%;
    }
}
.logo{
    img{
        width: 30px;
        height:30px
    }
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
}
.view-b{
    width: 100%;
    position: relative;
    margin-top: 30px;
    .view-b-a{
        width: 35px;
        height: 30px;
        border-right: 1px solid black;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    img{
        width: 30px;
        height: 30px;
    }
    input{
        width: 300px;
        height: 50px;
        border-radius: 5px;
        border: 1px solid black;
        padding-left: 50px;
    }
}
button{
    width: 355px;
    height: 45px;
    background-color: #3370ff;
    border-radius: 5px;
    border: 1px solid #3370ff;
    color:white;
    margin-top: 30px;
    margin-left: 5px;
}
.view-a{
    font-size: 18px;
    text-align:left !important;
}
</style>